<template>
  <div class="roies">
    <el-breadcrumb separator="/" class="bread">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="/">权限管理</a>
      </el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-button type="primary" plain>添加角色</el-button>
    <el-table :data="tableData" border style="width: 100%;">
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-row v-for="firstChildItem in scope.row.children" :key="firstChildItem.id">
            <el-col :span="4">
              <el-tag
                closable
                @close="handleClose(scope.row.id,firstChildItem.id,scope.row)"
              >{{firstChildItem.authName}}</el-tag>
              <i class="el-icon-arrow-right" v-if="firstChildItem.children.length>0"></i>
            </el-col>
            <el-col :span="20">
              <el-row v-for="secdChildItem in firstChildItem.children" :key="secdChildItem.id">
                <el-col :span="4">
                  <el-tag
                    closable
                    type="success"
                    @close="handleClose(scope.row.id,secdChildItem.id,scope.row)"
                  >{{secdChildItem.authName}}</el-tag>
                  <i class="el-icon-arrow-right" v-if="secdChildItem.children.length>0"></i>
                </el-col>
                <el-col :span="20">
                  <el-tag
                    closable
                    type="warning"
                    v-for="lastChildItem in secdChildItem.children"
                    :key="lastChildItem.id"
                    @close="handleClose(scope.row.id,lastChildItem.id,scope.row )"
                  >{{lastChildItem.authName}}</el-tag>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" type="info" v-if="scope.row.children.length<=0">该角色还未授权，请前往授权！</el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column prop="roleName" label="角色名称"></el-table-column>
      <el-table-column prop="roleDesc" label="描述"></el-table-column>
      <el-table-column prop label="操作">
        <template slot-scope="scope">
          <!-- scope.row获取到的是你点击的那一行对象的所有数据 -->
          <el-button
            type="primary"
            icon="el-icon-edit"
            circle
            size="mini"
            @click="editUser(scope.row)"
          ></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            size="mini"
            @click="deleteList(scope.row)"
          ></el-button>
          <el-button type="success" icon="el-icon-check" circle size="mini" @click="handleCheck(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 角色分配 -->
    <el-dialog title="角色分配" :visible.sync="editDialogFormVisible">
      <el-form-item label="当前的用户" label-width="90px">
        <el-tag type="success">标签二</el-tag>
      </el-form-item>
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editTxt">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 角色 -->
    <el-dialog title="角色" :visible.sync="checkDialogFormVisible">
      <div class="tree-box">
        <el-tree
          defalut-expend-all
          ref="tree"
          :data="rightsAll"
          show-checkbox
          node-key="id"
          :default-checked-keys="selectIds"
          :props="defaultProps"
          @click="handleNodeClick(scope.row)"
        ></el-tree>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="checkDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="checkedTxt">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getRoleList, claseList, getRights, grantRoleRight } from '@/api'
export default {
  data () {
    return {
      tableData: [],
      editDialogFormVisible: false,
      checkDialogFormVisible: false,
      rightsAll: [],
      defaultProps: {
        children: 'children',
        label: 'authName'
      },
      options: [
      ],
      value: '',
      selectIds: [],
      value1: true,
      value2: true,
      currentRoute: {}
    }
  },
  created () {
    this.initList()
  },
  methods: {
    initList () {
      getRoleList().then(res => {
        // console.log(res)
        this.tableData = res.data.data
      })
    },
    handleClose (roleId, rightId, row) {
      claseList(roleId, rightId, row).then(res => {
        this.$message.success(res.data.meta.msg)
        // this.initList()
        row.children = res.data.data
      })
    },
    editTxt () {
      console.log(9)
    },
    handleCheck (row) {
      this.checkDialogFormVisible = true
      this.selectIds = []
      this.currentRoute = row
      getRights('tree').then(res => {
        this.rightsAll = res.data.data
      })
      row.children.forEach(firstChildItem => {
        if (firstChildItem.children && firstChildItem.children.length > 0) {
          firstChildItem.children.forEach(secdChildItem => {
            if (secdChildItem.children && secdChildItem.children.length > 0) {
              secdChildItem.children.forEach(lastChildItem => {
                this.selectIds.push(lastChildItem.id)
              })
            }
          })
        }
      })
    },
    checkedTxt () {
      let allCheckedKeys = this.$refs.tree.getCheckedKeys()
      let halfCheckedKeys = this.$refs.tree.getHalfCheckedKeys()
      let idsArr = [...allCheckedKeys, ...halfCheckedKeys]
      grantRoleRight(this.currentRoute.id, idsArr.join(','))
        .then(res => {
          if (res.data.meta.status === 200) {
            this.$message.success(res.data.meta.msg)
            this.checkDialogFormVisible = false
            this.initList()
          } else {
            this.$message.error(res.data.meta.msg)
          }
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.bread {
  background-color: #f5f5f5;
  height: 45px;
  font-size: 15px;
  padding-left: 10px;
  line-height: 45px;
}
.el-button {
  margin: 15px 15px 15px 0;
}
.el-tag {
  margin: 0 0 10px 0;
}
</style>
